import React from 'react';
import 'antd/dist/antd.css';
import {BrowserRouter as Router,Route,Switch,Redirect,NavLink} from 'react-router-dom'
import Index from './views/index'
import Register from './views/Register'
import Login from './views/Login'
import Cart from './views/Cart'
import Vip from './views/Vip'
import Order from './views/Order'
import AppCss from './App.module.css'
import Payment from './views/Payment'
import './App.css'
import Detail from'./views/Detail'
import IndexCss from './views/index.module.css'
import HotSelling from './views/HotSelling'
export default class App extends React.Component{
  constructor(props){
    super(props)
    this.state={
      status:false
    }
  }
  out(){
    localStorage.removeItem('token')
    if(localStorage.getItem('token')){
      this.refs.loginBox.style.display='none'
      this.refs.outBox.style.display='flex'
      this.refs.loginBoxs.style.display='none'
      this.refs.outBoxs.style.display='flex'
    }else{
        this.refs.loginBox.style.display='flex'
        this.refs.outBox.style.display='none'
        this.refs.loginBoxs.style.display='flex'
        this.refs.outBoxs.style.display='none'
    }
}

  render(){
    return (
      <div>
        <Router>
        <div className={IndexCss.headerWrapMoce} ref='navMove'>
            <header className='m'>
                <div className={IndexCss.nav}>
                    <NavLink className={IndexCss.navBtn} to='/index'>首页</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:''}}}>畅销爆款</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'优典'}}}>商场同款</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'时尚花卉'}}}>特别推荐</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'服装'}}}>购潮榜单</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'饰品'}}}>跨界合作系列</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'名表'}}}>新品</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'运动鞋'}}}>潮流新趣</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'服饰'}}}>服装</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'箱包'}}}>箱包</NavLink>
                    <NavLink className={IndexCss.navBtn} to={{pathname:'/hotselling',state:{category:'幻'}}}>SALE</NavLink>
                </div>
            </header>
            <div className={AppCss.loginBox} ref='loginBoxs'>
                <NavLink className={IndexCss.navBtn} to='/login'>登录</NavLink>
                <NavLink className={IndexCss.navBtn} to='/register'>注册</NavLink>
            </div>
            <div className={AppCss.loginBox} ref='outBoxs'>
                <NavLink className={IndexCss.navBtn} to='/cart'>购物车</NavLink>
                <a href='setinnerhtml:;' className={IndexCss.navBtn} onClick={()=>this.out()}>退出</a>
            </div>
        </div>



        <div className={IndexCss.headerWrap} ref='navTop'>
          <header className='m'>
              <div className={IndexCss.tit}>
                  FIVE PLUS
              </div>
              <div className={IndexCss.nav}>
                  <NavLink to='/index'>首页</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:''}}}>畅销爆款</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'lyf'}}}>商场同款</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'时尚花卉'}}}>特别推荐</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'服装'}}}>购潮榜单</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'饰品'}}}>跨界合作系列</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'名表'}}}>新品</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'运动鞋'}}}>潮流新趣</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'服饰'}}}>服装</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'箱包'}}}>箱包</NavLink>
                  <NavLink to={{pathname:'/hotselling',state:{category:'幻'}}}>SALE</NavLink>
              </div>
          </header>
          <div className={AppCss.loginBox} ref='loginBox'>
              <NavLink className={IndexCss.navBtns} to='/login'>登录</NavLink>
              <NavLink className={IndexCss.navBtns} to='/register'>注册</NavLink>
          </div>
          <div className={AppCss.loginBox} ref='outBox'>
              <NavLink className={IndexCss.navBtns} to='/cart'>购物车</NavLink>
              <a href='setinnerhtml:;' className={IndexCss.navBtns} onClick={()=>this.out()}>退出</a>
          </div>
        </div>
        
          <div>
            <Switch>
              <Route path='/index' component={Index}/>
              <Route path='/login' component={Login}/>
              <Route path='/register' component={Register}/>
              <Route path='/cart' component={Cart}/>
			        <Route path='/order' component={Order}/>
              <Route path='/hotselling' component={HotSelling}/>
              <Route path='/detail' component={Detail}/>
              <Route path='/payment' component={Payment}/>
			        <Route path='/vip' component={Vip}/>
            </Switch>
            <Redirect to='/index'/>
          </div>
        
		<div className={AppCss.bottom}>
			<div className={AppCss.copy}>
          <div className={AppCss.one}>
              <p>公众号</p>
          </div>
          <NavLink to='/vip' className={AppCss.one}>
              <p>成为VIP</p>
          </NavLink>
      </div>
			<p className={AppCss.h5}>Follow Us</p>
			<div className={AppCss.b}>
			<span className={AppCss.p1}></span>
			<span className={AppCss.p1}></span>
			</div>
			<div className={AppCss.bottoms}>
			<a href='setinnerhtml:;'>粤ICP备10229258号-2</a>
			<img src="http://img2.fiveplus.com/material/2016/10/31/20161031164826771.png" alt=''/>
			<a href='setinnerhtml:;'>粤公网安备 44010602001994号</a>
			</div>
		</div>
		</Router>
      </div>
    )
  }
 
  componentDidMount(){
    window.scrollTo(0,0)
    document.onscroll=()=>{
      let scroll= document.documentElement.scrollTop
      if(scroll>65){
        this.refs.navMove.style.cssText="display:block;"
      }else{
        this.refs.navMove.style.cssText="display:none;"
      }
      if(localStorage.getItem('token')){
        this.refs.loginBox.style.display='none'
        this.refs.outBox.style.display='flex'
        this.refs.loginBoxs.style.display='none'
        this.refs.outBoxs.style.display='flex'
      }else{
          this.refs.loginBox.style.display='flex'
          this.refs.outBox.style.display='none'
          this.refs.loginBoxs.style.display='flex'
          this.refs.outBoxs.style.display='none'
      }
    }
    if(localStorage.getItem('token')){
      this.refs.loginBox.style.display='none'
      this.refs.outBox.style.display='flex'
      this.refs.loginBoxs.style.display='none'
      this.refs.outBoxs.style.display='flex'
    }else{
        this.refs.loginBox.style.display='flex'
        this.refs.outBox.style.display='none'
        this.refs.loginBoxs.style.display='flex'
        this.refs.outBoxs.style.display='none'
    }
  }
}